<!--支付协议-->
<template>
	<div class="app-container">
		<div class="content">
			<el-form :model="formData" ref="formData" label-width="100px" class="pagagreeWp" :rules="rules">
			    <el-form-item label="" class='textareaWp' prop='content1' v-show="manyshow">
			    	<div class="iphonewp">
			    		<div class="iphonemain2">
			    		</div>	
			    		<div class="iphonemain">
			    			<p style="margin: 0;font-size: 15px;font-weight: bold;text-align: center;margin-bottom: 8px;">{{agreement}}</p>
			    			<div v-html='content1'></div>
			    		</div>
			    	</div>
				</el-form-item>
				<el-form-item label="协议名称：" prop='agreement' v-show="!manyshow">
			    	<el-input class='agreementInput' size='mini' type='text' placeholder='请输入协议名称' v-model='formData.agreement'></el-input>			    	
				</el-form-item>
				
				<el-form-item label="协议内容：" class='textareaWp' prop='content' v-show="!manyshow">
			    	<div>
			    		<editor class='iframe'
			    		style="width:900px;height: 300px;position: relative;top: 5px;"
							v-model='formData.content'
							@show='editors'
							>
						</editor>
			    	</div>			    	
				</el-form-item>
				
				
				<el-form-item class='btn-item' v-show="!manyshow">
			    	<el-button type="primary" class="submitBtn" @click="save" size="small">保存</el-button>
			    	<el-button type="" class="submitBtn" @click="pass" size="small">取消</el-button>
				</el-form-item>
			</el-form>
			
			<el-form style="padding-left: 30px;float: left;margin-top: 120px;">
				<el-form-item class='btn-item'>
					<el-button @click="$router.back(-1)" size="small" type="info" v-show="manyshow">返回</el-button>
					<el-button @click="edit" size="small" type="primary" v-show="manyshow">编辑</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import Vue from 'vue'
import editor from '@/components/editor';
export default{
	components:{
			editor
		},
	data(){
		return{
			formData:{
			},
			manyshow:true,
			agreement:'',
			content1:'',
			rules: {
				agreement: [{ required: true, message: "请输入协议标题", trigger: "blur" }],
				content: [{ required: true, message: "请输入协议内容", trigger: "blur" }]
			}
		}
	},
	mounted(){
		this.getInfo();
//		tinymce.activeEditor.getBody().setAttribute('contenteditable', true);
	},
	filters: {
        
    },
	methods:{
		getInfo(){
			let params = {};
			this.post(params,'services/app/applets/AgreementDetail').then(res=>{
				if (res.success) {
					this.formData = res.result;
					this.agreement = res.result.agreement
					this.content1 = res.result.content;
				}
			})
		},
		save(){
			this.$refs["formData"].validate(valid => {
        		if (valid) {
					let params = {
						title:this.formData.agreement,
						content:this.formData.content
					}
					this.post(params,'services/app/applets/MofityAgreement').then(res=>{
						if (res.success) {
							this.pass();
							this.succeeNot();
							this.getInfo();
							
						}else{
							this.failNot(res.error.message)
						}
					})
				}
			})
		},
		edit(){
			this.manyshow = false
		},
		pass(){
			this.manyshow = true
		},
		//保存成功提示
	    succeeNot(){
	    	const h = this.$createElement;
	      	this.$notify({
	          title: '成功',
	          message: '协议保存成功',
	          type: 'success',
	          customClass:"el-notification-success"
	        });
	    },
	    //保存失败提示
	    failNot(message){
	    	console.log(message)
	    	const h = this.$createElement;
	      	this.$notify.error({
	          title: '错误',
	          message: message,
	          duration: 0,
	          customClass:"el-notification-error"
	        });
	    },
	    //  fuwenben
		editors(val){
			this.formData.content = val;
		}
	}
}
</script>

<style lang="scss" scoped>
.content{
	padding:30px 20px;overflow: hidden;
	
	.agreementInput{width: 300px;}
	.btn-item{text-align: center;}
	.editbtn{float: right;cursor: pointer;}
	// .textareaWp{margin-top: -10px;}
	.iphonewp{
		width: 334.8px;height: 705.6px;background-image: url(../../assets/images/iPhonebg.png);background-repeat: no-repeat;background-size: 100% 100%;box-sizing: border-box;padding: 86.3px 21.4px;
		
		.iphonemain{width: 292px;height: 533px;overflow-y: auto;box-sizing: border-box;padding:45px 10px 10px  10px;position: relative;background: #FFFFFF;}
		.iphonemain2{width: 292px;overflow-y: auto;box-sizing: border-box;padding:45px 10px 10px  10px;background-image: url(../../assets/images/top.png);background-repeat: no-repeat;background-size: 100%;position: absolute;left: 21.4px;top: 86.3px;z-index: 9999;}
	}
}
.pagagreeWp{margin-top:20px;float: left;}
</style>
<style type="text/css">
	.textareaWp .el-textarea__inner{min-height: 460px !important;}
	.pagagreeWp .el-textarea__inner{font-size: 13px;}
	.pagagreeWp .el-input.is-disabled .el-input__inner,.pagagreeWp .el-textarea.is-disabled .el-textarea__inner{background: transparent;border-color: #FFFFFF;cursor: default;font-size: 13px;}
	.contentInput p{padding: 0;margin: 0;color: #666666;}
	.mce-content-body{font-size: 13px !important;}
</style>